<% include("/common/header.html", {active:'music', title:'音乐视听-找回你放松的感觉!', cssList : ['/player/reset.css', '/player/style.css']}){} %>
<div id="main">
	<!-- 音乐专辑 -->
	<div id="music-album-list" class="col-lg-12">
		<!-- left -->
		<div id="album-left" class="col-lg-8">
			<div class="mnav">
				<ul class="nav navbar-nav">
					<li class="active"><a href="javascript:void(0);" onclick="$unique.music.tagclick(0);">随机播放</a></li>
					<li><a href="javascript:void(0);" onclick="$unique.music.tagclick(1);">最热曲目</a></li>
					<li><a href="javascript:void(0);" onclick="$unique.music.tagclick(2);">最新发布</a></li>
					<li><a href="javascript:void(0);" onclick="$unique.music.tagclick(3);">个性化标签</a></li>
					<li><a href="javascript:void(0);" onclick="$unique.music.tagclick(4);">音乐专辑</a></li>
				</ul>
				<form class="navbar-form navbar-left" role="search" _lpchecked="1">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="请输入歌曲名称">
					</div>
					<button type="submit" class="btn btn-default">搜索</button>
				</form>
			</div>
			<!-- 音乐列表区域 -->
			<div id="music-list" class="clear mlist">
				<%for(music in pageEntity.results!){%>
					<div id="m-${music.id}" class="col-md-4 col-sm-6 col-lg-3 music">
						<div class="img-desc">
							<img class="img-rounded" originalSrc="${music.cover_url!'./assets/images/music/default-music.jpg'}" title="${music.song!}" onclick="$unique.music.playerMp3(${music.id})">
							<cite>${music.song!}</cite>
						</div>
						<div class="card-heading">
							<div class="profile" style="margin-top: 8px;">
								<span onclick="$unique.music.like(this, ${music.id!})" title="有${music.like_count!}人喜欢这首歌">
									<i class="icon-heart-empty"></i> 
									<span class="like-count">${music.like_count!}</span>
								</span>&nbsp;&nbsp;
								<span onclick="$unique.music.download(${music.id!}, '${music.mp3_url!}')" title="下载：${music.song!}">
									<i class="icon-arrow-down"></i> 下载</span>&nbsp;&nbsp; 
								<span><i class="icon-time"></i> ${music.date_zh!}</span>
							</div>
						</div>
					</div>
				<%}%>
				<ul id="music-page" class="pager pager-pills">
		            <li class="previous"><a href="${base}/music?page=${pageEntity.prev_page!1}">« 上一页</a></li>
						<%for(var i=1; i<=pageEntity.totalPage!; i++){
						  	if(i == pageEntity.page!){%>
						  		<li class="active"><a href="${base}/music?page=${i}">${i}</a></li>
						  <%} else{%>
						  		<li><a href="${base}/music?page=${i}">${i}</a></li>
						  	<%}
						}%>
					<li class="next"><a href="${base}/music?page=${pageEntity.next_page!}">下一页 »</a></li>
		        </ul>
			</div>
		</div>
		
		<!-- right -->
		<div id="album-right" class="col-lg-4">
			<div class="clear cover">
				<div class="music-player">
					<div class="info">
						<div class="left">
							<a href="javascript:;" class="icon-play-shuffle"></a>
							<!-- <a href="javascript:;" class="icon-play-heart"></a> -->
						</div>
						<div class="center">
							<div class="jp-playlist">
								<ul>
									<li></li>
								</ul>
							</div>
						</div>
						<div class="right">
							<a href="javascript:;" class="icon-play-repeat"></a> 
						</div>	

						<div class="progress jp-seek-bar">
							<span class="jp-play-bar" style="width: 0%"></span>
						</div>
					</div>

					<div class="controls">
						<div class="current jp-current-time">00:00</div>
						<div class="play-controls">
							<a href="javascript:;" class="icon-play-previous jp-previous" title="上一首"></a>
							<a href="javascript:;" class="icon-play-play jp-play" title="播放"></a>
							<a href="javascript:;" class="icon-play-pause jp-pause" title="暂停"></a>
							<a href="javascript:;" class="icon-play-next jp-next" title="下一首"></a>
						</div>
						<div class="volume-level jp-volume-bar">
							<span class="jp-volume-bar-value" style="width: 0%"></span>
							<a href="javascript:;" class="icon-play-volume-up jp-volume-max" title="最大音量"></a>
							<a href="javascript:;" class="icon-play-volume-down jp-mute" title="静音"></a>
						</div>
					</div>

					<div id="jquery_jplayer" class="jp-jplayer"></div>

				</div>
			</div>
			<div class="clear lrc">歌词部分。</div>
		</div>
	</div>
	<!-- 
	<div id="comment">
		<div class="ds-thread" data-thread-key="music" data-title="七牛云音乐" data-url="http://127.0.0.1:8080/qiniu-cloud/music"></div>
		<script type="text/javascript">
			var duoshuoQuery = {short_name:"fm-im90"};
			(function() {
				var ds = document.createElement('script');
				ds.type = 'text/javascript';ds.async = true;
				ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.unstable.js';
				ds.charset = 'UTF-8';
				(document.getElementsByTagName('head')[0] 
				 || document.getElementsByTagName('body')[0]).appendChild(ds);
			})();
		</script>
	</div>
	 -->
</div>

<script src='${cdn}/assets/js/jq/jquery.jplayer.min.js'></script>
<script src='${cdn}/assets/js/jq/jplayer.playlist.min.js'></script>
<script src='${cdn}/assets/js/jq/lyz.delayLoading.min.js'></script>
<script src='${cdn}/assets/ueditor/ueditor.parse.js'></script>
<% include("/common/footer.html", {jsList:['front/music.js']}){} %>
